<template>
  <div class="fenqy">
    <!-- <div class="contentTopTitle">
      <div class="fl">
        <div class="title">分套餐收入跟踪</div>
      </div>
    </div>-->
    <div class="operation">
      <el-form :inline="true" :model="form" label-width="90px" class="formList">
        <el-form-item label="选择区域">
          <dx-cascader :area_id.sync="form.areaId" />
          <!-- <el-select v-model="form.areaId" placeholder="选择区域" @change="areaChange($event)">
            <el-option
              v-for="item in areaList"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
            ></el-option>
          </el-select>-->
        </el-form-item>
        <el-form-item label="账期">
          <el-date-picker v-model="form.month" value-format="yyyyMM" type="month" placeholder="选择月"></el-date-picker>
        </el-form-item>
        <el-form-item style="width: 30%;">
          <el-button size="small" type="primary" @click="submitHandle()">查询</el-button>
          <el-button
            size="small"
            type="orange"
            @click="exportExcel(true)"
            style="margin-left: 20px"
          >批量导出</el-button>
          <el-button size="small" type="orange" @click="exportExcel(false)">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <p class="g-unit">卡数: 个, 收入: 元</p>
    <div class="tableBox">
      <el-table
        ref="table"
        border
        stripe
        v-loading="tableLoading"
        :data="tableData"
        style="width: 100%"
        class="tableTh28"
        height="73vh"
      >
        <!-- <el-table-column fixed label="区域ID" prop="areaId"></el-table-column> -->
        <el-table-column fixed label="区域" prop="areaName" ></el-table-column>
        <!-- <el-table-column fixed label="父级区域ID" prop="parentId"></el-table-column> -->
        <!-- <el-table-column fixed label="父级区域" prop="parentName"></el-table-column> -->
        <!-- <el-table-column fixed label="区域等级" prop="areaLvl"></el-table-column> -->
        <el-table-column fixed label="本月新增养卡数" prop="val1"></el-table-column>
        <el-table-column fixed label="本月新增养卡收入" prop="val2"></el-table-column>
        <el-table-column fixed label="存量扣罚养卡数" prop="val3"></el-table-column>
        <el-table-column fixed label="存量扣罚养卡收入" prop="val4"></el-table-column>
        <el-table-column fixed label="存量补发养卡数" prop="val5"></el-table-column>
        <el-table-column fixed label="存量补发养卡收入" prop="val6"></el-table-column>

      </el-table>
    </div>
  </div>
</template>

<script>
  import { $budgetAPI } from "@/api";
  import { getSessionStorage } from "@/common/js/storage";
  import { createSpanOne } from "@/utils/mixin.js";
  import prefixAPI from "@/api/prefixAPI"
  import {getCookie,setCookie} from '@/common/js/cookie';
  let accountInfo = JSON.parse(getSessionStorage("accountInfo"));

  export default {
    data() {
      return {
        tableLoading: false, //
        areaList: [],
        tableData: [],
        // titleId: [],
        // titleName: [],
        form: {
          areaId: accountInfo.areaId,
          month: ''
        }
      };
    },
    created() {
      this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
      // this.getCompanyByLvl();
      // this.getData();
      // this.form.month = this.moment().subtract(1,'months').format('YYYYMM')
      this.getMaxAcctMonthByMealPart();
    },
    methods: {
      areaChange() {},
      //分产品导出
      exportExcel(type) {
        let areaId = "";
        let month = "";
        if (this.form.areaId) {
          areaId = this.form.areaId;
        } else {
          areaId = this.accountInfo.areaId;
        }
        // if (this.form.year) {
        month = this.form.month;
        // } else {
        //   month = this.formatDate(new Date());
        // }
        if(type){
          if (process.env.NODE_ENV == "development") {
            window.location.href =
              prefixAPI.loc +
              "/api/suspectedCard/exportBatch?areaId=" +
              areaId +
              "&accMonth=" +
              month + "&token=" + getCookie('token');
          } else if (process.env.NODE_ENV == "production") {
            window.location.href =
              prefixAPI.hp +
              "/api/suspectedCard/exportBatch?areaId=" +
              areaId +
              "&accMonth=" +
              month + "&token=" + getCookie('token');
          }
        }else {
          if (process.env.NODE_ENV == "development") {
            window.location.href =
              prefixAPI.loc +
              "/api/suspectedCard/export?areaId=" +
              areaId +
              "&accMonth=" +
              month + "&token=" + getCookie('token');
          } else if (process.env.NODE_ENV == "production") {
            window.location.href =
              prefixAPI.hp +
              "/api/suspectedCard/export?areaId=" +
              areaId +
              "&accMonth=" +
              month + "&token=" + getCookie('token');
          }
        }

      },
      submitHandle() {
        this.getData();
      },
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex == 0) {
          return this.spanArr[rowIndex];
        }
      },
      getData() {
        let areaId = this.form.areaId
          ? this.form.areaId
          : this.accountInfo.areaId;
        let month = this.form.month
          ? this.form.month
          : this.formatDate(new Date());
        this.tableLoading = true;
        $budgetAPI.suspectedGetList(
          {
            areaId: areaId,
            accMonth: month
          },
          res => {
            this.tableLoading = false;
            if (res.code == 0) {
              console.log(res)
              let content = res.content;
              this.tableData = content.dataList;
              // this.spanArr = createSpanOne(this.tableData, "indexType");
              // setTimeout(() => {
              //   this.$refs.table.doLayout();
              // }, 1200);

            } else {
              this.alertError(res);
            }
          },
          err => {
            this.tableLoading = false;
          }
        );
      },

      //根据层级获取区域树
      getCompanyByLvl() {
        $budgetAPI.getCompanyByLvl(
          {
            lvl: this.accountInfo.areaLvl,
            areaId: this.accountInfo.areaId
          },
          res => {
            let areaId = this.accountInfo.areaId;
            let areaName = this.accountInfo.areaName;
            if (res.code == 0) {
              for (let i = 0; i < res.content.length; i++) {
                if (res.content[i].areaId == areaId) {
                  this.areaList = res.content;
                  return;
                }
              }
              this.areaList = [{ areaId, areaName }, ...res.content];
            } else {
              this.alertError(res);
            }
          },
          err => {}
        );
      },
      formatDate: function(value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        return y.toString() + MM.toString();
      },
      getMaxAcctMonthByMealPart(){
        let areaId = this.form.areaId
          ? this.form.areaId
          : this.accountInfo.areaId;
        $budgetAPI.suspectedGetMaxAcctMonth( {
            areaId
          },
          res => {
            if (res && res.code == 0) {
              this.form.month=res.content;
              this.getData();
            }
          },
          err => {
          }
        );
      }
    }
  };
</script>

<style lang="scss">
  .point-meal {
    // .daochu {
    //   float: right;
    //   .el-form-item__content {
    //     float: right;
    //     .el-button {
    //       float: right;
    //     }
    //   }
    // }
    // .el-form-item__content{
    //   float: right;
    // }
  }
</style>
